<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <!--邀请海报-->
    <u-navbar
      title="邀请海报"
      leftIcon="arrow-left"
      leftIconSize="40"
      leftIconColor="#000000"
      @rightClick="goDetail"
      :placeholder="true"
      :autoBack="true"
    >
      <view slot="right" class="text-sm text-light">提成规则</view>
    </u-navbar>
    <swiper
      style="height: 1250rpx"
      :indicator-dots="true"
      indicator-color="#CCCCCC"
      indicator-active-color="#FF3D62"
      circular
      :autoplay="false"
    >
      <swiper-item v-for="item in list" :key="item.id">
        <view class="flex items-center justify-center mt-8">
          <poster :srcImage="item.url"></poster>
        </view>
      </swiper-item>
    </swiper>
    <!--提成规则-->
    <u-modal
      :show="isShow"
      title="提成规则"
      confirmColor="#FF3D62"
      :title-style="{
        'font-size': '34rpx',
        'font-weight': 'bold',
        'line-height': '48rpx',
        color: '#000',
      }"
      @confirm="isShow = false"
    >
      <view
        class="py-1 text-sm leading-6 overflow-y-auto mt-1.5"
        style="max-height: 500rpx"
      >
        <u-parse :content="inviteRule"></u-parse>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { getPoster } from '../../package-account/services/mine';
import { getRichText } from '../../services/user';

export default {
  data() {
    return {
      isShow: false,
      list: [],
      inviteRule: '',
    };
  },
  async created() {
    this.$store.dispatch('getUser').then(() => {
      this._getPoster();
    });
  },
  methods: {
    //获取富文本
    async _getRichText(type) {
      const { code, data } = await getRichText({ type });
      if (code != 200) return;
      if (type == 'buyinvite') {
        this.inviteRule = data.html;
      } else if (type == 'buyinvitelink') {
        this.content = data.html;
      }
    },
    //查看提成规则
    goDetail() {
      this._getRichText('buyinvite');
      this.isShow = true;
    },
    //获取邀请海报数据
    async _getPoster() {
      const { code, data } = await getPoster();
      if (code != 200) return;
      //console.log(data);
      this.list = [
        { id: 1, url: data.imageUrl1 },
        { id: 2, url: data.imageUrl2 },
        { id: 3, url: data.imageUrl3 },
      ];
    },
  },
};
</script>

<style></style>
